<template>
  <div class="page-container">
    <div class="content">
      <div>
        <img src="@/assets/404.svg" alt="404 Not Found" class="error-image" />
      </div>
      <RouterLink :to="{ path: '/', replace: true }" class="ant-btn ant-btn-primary"
        >回到首页</RouterLink
      >
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'NotFound',
  });
</script>

<style lang="less" scoped>
  .page-container {
    display: flex;
    width: 85vw;
    height: 85vh;
    background-color: white;
    justify-content: center;
    align-items: center;
    .content {
      display: flex;
      flex-direction: column;
      align-items: center; // 水平居中
    }
    .error-image {
      // 设置图片的最大宽度和高度
      max-width: 70vw; // 根据需要调整宽度
      max-height: 70vh; // 根据需要调整高度
    }
  }
</style>
